<script lang="ts" setup>
import type { PropType } from 'vue'
import { usePageId } from '@/hooks/usePageId'
import IconFont from '@/assets/icons/iconFont'
import Doptions from './components/Doptions.vue'
import { useTodoListStore } from '@/stores/list.store'
import { useThemeCustomList } from '@/hooks/useThemeCustomList'
import { getDateLocaleString } from '@/utils/common/getDateLocaleString'

import { type IListItem, PageId } from '@/stores/interfaces/list.interface'

const props = defineProps({
  itemInfo: {
    type: Object as PropType<IListItem>,
    required: true
  }
})
const { pageId } = usePageId()
const emit = defineEmits<{
  (event: 'handleDetail', detail: IListItem): void
}>()

const handleDetail = () => {
  emit('handleDetail', props.itemInfo)
}

const { updateList } = useTodoListStore()
function updateListState(key: keyof IListItem) {
  updateList({
    id: props.itemInfo.id,
    [key]: !props.itemInfo[key]
  })
}

const { category } = useThemeCustomList()
function getTaskTitle(type: number = props.itemInfo.type) {
  return category.value.find((item) => item.uuid === type)?.title
}
</script>

<template>
  <a-dropdown trigger="contextMenu" :popup-max-height="false">
    <div class="list-box" @click="handleDetail">
      <a-tooltip background-color="#ebeef5" mini>
        <template #content>
          <p class="tips">{{ $t('list.item.tip.done1') }}</p>
          <br />
          <p class="tips">{{ $t('list.item.tip.done2') }}</p>
        </template>
        <span @click.stop="updateListState('finished')">
          <IconFont
            :class="itemInfo.finished ? 'fill-green-600' : ''"
            class="mx-2"
            :type="itemInfo.finished ? 'icon-quangou' : 'icon-quan'"
            :size="20"
          />
        </span>
      </a-tooltip>
      <div class="flex-1 dark:text-gray-100">
        <p :class="`list-title list-${itemInfo.finished ? 'done' : 'todo'}`">
          {{ itemInfo.title }}
        </p>
        <p class="my-1 text-xs text-gray-500">
          <span v-if="itemInfo.type > 8" class="text-sm">
            <IconAttachment class="-mr-1" />
            {{ getTaskTitle() }}
          </span>
          <span v-else>
            <IconFont type="icon-zhuye" />
            {{ $t('layout.menu.task') }}
          </span>
          <span v-if="(itemInfo?.endTime ?? -1) > 0" class="inline-flex items-center text-red-400">
            <span class="ml-1 mr-2 text-gray-500">•</span>
            <IconFont type="icon-rili" class="mr-1.5" />
            {{ getDateLocaleString(itemInfo.endTime!, $i18n.locale, true) }}
          </span>
          <span v-if="itemInfo.description">
            <span class="mx-1">•</span>
            <IconFile class="fill-green-300 dark:fill-gray-300" :size="14" />
          </span>
          <span v-if="pageId === PageId.distribution">
            <span class="mx-1">•</span>
            <IconFont
              type="icon-huangguan_king"
              class="fill-indigo-400 dark:fill-yellow-300"
              :size="14"
            />
            <span class="text-indigo-400 dark:text-yellow-300">
              {{ itemInfo.owner }}
            </span>
          </span>
          <span v-if="pageId === PageId.assign">
            <span class="mx-1">•</span>
            <IconFont type="icon-at" class="fill-indigo-400 dark:fill-gray-300" :size="14" />
            <span class="text-indigo-400 dark:text-gray-300">{{ itemInfo.worker }}</span>
          </span>
        </p>
      </div>
      <a-tooltip background-color="#ebeef5" mini>
        <template #content>
          <span class="tips">{{ $t('list.item.tip.main') }}</span>
        </template>
        <span @click.stop="updateListState('important')">
          <IconFont
            :class="itemInfo.important ? 'fill-red-600' : ''"
            :type="itemInfo.important ? 'icon-shoucangxuanzhong' : 'icon-shoucang'"
            :size="20"
          />
        </span>
      </a-tooltip>
    </div>
    <template #content>
      <Doptions :item-info="itemInfo" />
    </template>
  </a-dropdown>
</template>

<style scoped>
.list-box {
  transition: background-color 0.3s ease;

  @apply rounded-md flex mb-2 w-full  opacity-80 p-2 justify-between;
  @apply bg-light-50 dark:bg-gray-800;
}

.list-box:hover {
  @apply bg-light-200 opacity-100 dark:bg-gray-700;
}

.list-title {
  @apply relative overflow-hidden;
}

.list-title::before,
.list-title::after {
  content: '';
  margin-top: -0.5px;

  @apply h-2 top-1/4 w-0 absolute;
  @apply bg-gray-200 opacity-90 dark:bg-gray-800;
}

.list-title::before {
  left: -2.5px;
}

.list-todo::after {
  @apply right-1;
  @apply bg-gray-200 dark:bg-gray-800;

  transition: width 1s ease-out;
}

.list-done::before {
  @apply bg-gray-200 w-full dark:bg-gray-800;

  transition: width 0.5s ease-in;
}

.list-done::after {
  @apply bg-transparent w-full;

  transition: 0s;
}

:global(.arco-dropdown-option-has-suffix .arco-dropdown-option-content) {
  @apply flex-1;
}
</style>
